<template>
    <div class="rightOne">
        <div class="rightOne-title">
            人口统计
        </div>
        <div class="rightOne-content">
            <div class="rightOne-btn">
				<span :class="checkedType == 0 ? 'active' : ''" @click="switchFun(0)"></span>
				<span :class="checkedType == 1 ? 'active' : ''" @click="switchFun(1)"></span>
            </div>
            <div class="rightOne-top" :style="{ marginLeft: `${listLeft}px` }">
                <div class="topinner" v-for="(item,index) in dataList" :key="index" >
                      <div class="topinner-left">
                            <div class="img">
                                <img :src="item.img" alt="">
                             </div>
                      </div>
                      <div class="topinner-right">
                            <p>{{item.title}}</p>
                            <div class="font">
                                <countTo :startVal='0' :endVal='item.count' :duration='3000'></countTo>
                                <span v-if="item.count == 925">万人</span>
                                <span v-if="item.count !== 925">人</span>
                            </div>
                      </div>
                </div>
                <!-- <div class="topinner" >
                      <div class="topinner-left">
                            <div class="img">
                                <img :src="obj2.img" alt="">
                             </div>
                      </div>
                      <div class="topinner-right">
                            <p>{{obj2.title}}</p>
                            <div>
                                <dv-digital-flop :config="config2" style="width: 100%; height: 68%" />
                            </div>
                      </div>
                </div> -->
                  <!-- <div class="topinner">
                      <div class="topinner-left">
                            <div class="img">
                                <img :src="obj3.img" alt="">
                             </div>
                      </div>
                      <div class="topinner-right">
                            <p>{{obj3.title}}</p>
                            <div>
                                <dv-digital-flop :config="config3" style="width: 100%; height: 68%" />
                            </div>
                      </div>
                </div> -->
                  <!-- <div class="topinner" >
                      <div class="topinner-left">
                            <div class="img">
                                <img :src="obj4.img" alt="">
                             </div>
                      </div>
                      <div class="topinner-right">
                            <p>{{obj4.title}}</p>
                            <div>
                                <dv-digital-flop :config="config4" style="width: 100%; height: 68%" />
                            </div>
                      </div>
                </div> -->
                  <!-- <div class="topinner" >
                      <div class="topinner-left">
                            <div class="img">
                                <img :src="obj5.img" alt="">
                             </div>
                      </div>
                      <div class="topinner-right">
                            <p>{{obj5.title}}</p>
                            <div>
                                <dv-digital-flop :config="config5" style="width: 100%; height: 68%" />
                            </div>
                      </div>
                </div> -->
                  <!-- <div class="topinner" >
                      <div class="topinner-left">
                            <div class="img">
                                <img :src="obj6.img" alt="">
                             </div>
                      </div>
                      <div class="topinner-right">
                            <p>{{obj6.title}}</p>
                            <div>
                                <dv-digital-flop :config="config6" style="width: 100%; height: 68%" />
                            </div>
                      </div>
                </div> -->
                  <!-- <div class="topinner" >
                      <div class="topinner-left">
                            <div class="img">
                                <img :src="obj7.img" alt="">
                             </div>
                      </div>
                      <div class="topinner-right">
                            <p>{{obj7.title}}</p>
                            <div>
                                <dv-digital-flop :config="config7" style="width: 100%; height: 68%" />
                            </div>
                      </div>
                </div> -->
                  <!-- <div class="topinner" >
                      <div class="topinner-left">
                            <div class="img">
                                <img :src="obj8.img" alt="">
                             </div>
                      </div>
                      <div class="topinner-right">
                            <p>{{obj8.title}}</p>
                            <div>
                                <dv-digital-flop :config="config8" style="width: 100%; height: 68%" />
                            </div>
                      </div>
                </div> -->
            </div>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import ThemeTitlenew from "../../common/ThemeTitlenew";
import countTo from '../../common/VueCountTo/vue-countTo.vue'
import { useStore } from "vuex";
export default {
    name: "HngkRightOne",
    components: {
        ThemeTitlenew,
    },
     data(){
        return{
        cityCenter:{
            海口市: [110.198418, 20.045805],
            三亚市: [109.511709, 18.252865],
            三沙市: [112.234483, 16.774644],
            儋州市: [109.580812, 19.520948],
            五指山市: [109.516784, 18.774827],
            文昌市: [110.797473, 19.544234],
            琼海市: [110.474524, 19.259112],
            万宁市: [110.392605, 18.793697],
            东方市: [108.651829, 19.095187],
            定安县: [110.358001, 19.681215],
            屯昌县: [110.101667, 19.351662],
            澄迈县: [110.007497, 19.738885],
            临高县: [109.690508, 19.912025],
            白沙黎族自治县: [109.4429, 19.221641],
            昌江黎族自治县: [109.055783, 19.298139],
            乐东黎族自治县: [109.173384, 18.750063],
            陵水黎族自治县: [110.037553, 18.506045],
            保亭黎族苗族自治县: [109.700373, 18.640156],
            琼中黎族苗族自治县: [109.838389, 19.033369],
        },
        citypoint:[{city:"海口市",lng:110.198418,lat:20.045805},{city:"三亚市",lng:109.511709, lat:18.252865},{city:"三沙市",lng:112.234483, lat:16.774644},{city:"儋州市",lng:109.580812,lat:19.520948},{city:"五指山市",lng:109.516784, lat:18.774827},{city:"文昌市",lng:110.797473, lat:19.544234},{city:"琼海市",lng:110.474524,lat:19.259112},{city:"万宁市",lng:110.392605,lat:18.793697},{city:"东方市",lng:108.651829, lat: 19.095187},{city:"定安县",lng:110.358001, lat:19.681215},{city:"屯昌县",lng:110.101667, lat:19.351662},{city:"澄迈县",lng:110.007497, lat:19.738885},{city:"临高县",lng:109.690508, lat:19.912025},{city:"白沙黎族自治县",lng:109.4429, lat:19.221641},{city:"昌江黎族自治县",lng:109.055783, lat:19.298139},{city:"乐东黎族自治县",lng:109.173384, lat:18.750063},{city:"陵水黎族自治县",lng:110.037553, lat:18.506045},{city:"保亭黎族苗族自治县",lng:109.700373, lat:18.640156},{city:"琼中黎族苗族自治县",lng:109.838389, lat:19.033369}],
            val:[],
            personCount:0,
            checkedType: 0,
            listLeft:0,
            newData:[],
            rkgk:[],
            obj1:{
                img:"/data/images/hngk/人口总数.png",title:"海南人口总数"
            },
            config1: {
				number: [43000],
				content: '{nt}万人',
				formatter: this.formatData1,
				style: {
                    fontSize:25,
					fill: 'rgb(15, 208, 243)'
				},
				animationCurve: 'easeOutCubic',
				animationFrame: 20
			},
            obj2:{
                img:"/data/images/hngk/进岛.png",title:"今日进岛人数"
            },
            config2: {
				number: [43000],
				content: '{nt}人',
				// formatter: this.formatData1,
				style: {
                    fontSize:25,
					fill: 'rgb(15, 208, 243)'
				},
				animationCurve: 'easeOutCubic',
				animationFrame: 20
			},
            obj3:{
                img:"/data/images/hngk/户籍家庭.png",title:"户籍人口数量"
            },
            config3: {
				number: [43000],
				content: '{nt}人',
				// formatter: this.formatData1,
				style: {
                    fontSize:25,
					fill: 'rgb(15, 208, 243)'
				},
				animationCurve: 'easeOutCubic',
				animationFrame: 20
			},
             obj4:{
                img:"/data/images/hngk/境外人口.png",title:"境外人员数量"
            },
            config4: {
				number: [43000],
				content: '{nt}人',
				// formatter: this.formatData1,
				style: {
                    fontSize:25,
					fill: 'rgb(15, 208, 243)'
				},
				animationCurve: 'easeOutCubic',
				animationFrame: 20
			},
              obj5:{
                img:"/data/images/hngk/离岛.png",title:"今日离岛人数"
            },
            config5: {
				number: [43000],
				content: '{nt}人',
				// formatter: this.formatData1,
				style: {
                    fontSize:25,
					fill: 'rgb(15, 208, 243)'
				},
				animationCurve: 'easeOutCubic',
				animationFrame: 20
			},
            obj6:{
                img:"/data/images/hngk/常住人口.png",title:"常驻人口数量"
            },
            config6: {
				number: [43000],
				content: '{nt}人',
				// formatter: this.formatData1,
				style: {
                    fontSize:25,
					fill: 'rgb(15, 208, 243)'
				},
				animationCurve: 'easeOutCubic',
				animationFrame: 20
			},
             obj7:{
                img:"/data/images/hngk/流动人口.png",title:"流动人口数量"
            },
            config7: {
				number: [43000],
				content: '{nt}人',
				// formatter: this.formatData1,
				style: {
                    fontSize:25,
					fill: 'rgb(15, 208, 243)'
				},
				animationCurve: 'easeOutCubic',
				animationFrame: 20
			},
             obj8:{
                img:"/data/images/hngk/未落户.png",title:"未落户人口数量"
            },
            config8: {
				number: [43000],
				content: '{nt}人',
				// formatter: this.formatData1,
				style: {
                    fontSize:25,
					fill: 'rgb(15, 208, 243)'
				},
				animationCurve: 'easeOutCubic',
				animationFrame: 20
			},
            dataList:[
                {img:"/data/images/hngk/人口总数.png",title:"海南人口总数",count:925},
                {img:"/data/images/hngk/进岛.png",title:"今日进岛人数",count:4300},
                {img:"/data/images/hngk/户籍家庭.png",title:"户籍人口数量",count:4300},
                {img:"/data/images/hngk/境外人口.png",title:"境外人员数量",count:4300},
                {img:"/data/images/hngk/离岛.png",title:"今日离岛人数",count:4300},
                {img:"/data/images/hngk/常住人口.png",title:"常驻人口数量",count:4300},
                {img:"/data/images/hngk/流动人口.png",title:"流动人口数量",count:4300},
                {img:"/data/images/hngk/未落户.png",title:"未落户人口数量",count:4300}]
        }
    },
    props: {
        countByCity: Array,
        countTotal: Object,
    },
    components:{
        countTo
    },
    watch:{
        countByCity(oldval,newval){
            this.val = oldval
        },
        countTotal(oldval,newval){
            this.personCount = oldval
            console.log(this.personCount.zrk)
        }
    },
    methods:{
        renkouTotal(){
            layerManager.removeAll();
            axios.get("./data/geojson/海南省.json").then((res) => {
                let datas = res.data.features;
                this.val.push({ name: "三沙市", value: 0 });
                datas.forEach((element, index) => {
                    layerManager.addPloygon(
                        "shijie" + index,
                        [].concat.apply([], element.geometry.coordinates[0][0]),
                        parseInt(this.val[index].value * 0),
                        index,
                        "leftClick",
                    );
                });
                this.val.forEach((item, index) => {
                    layerManager.addOnlyLabel(
                        "xiangzhen" + index,
                        this.cityCenter[item.name],
                        parseInt(item.value * 0) + 300,
                        item.name + "\n(" + item.value + "人)",
                        "leftClick",
                        // lLeftClick
                    );
                });  
                for(var i=0;i<this.citypoint.length;i++){
                  layerManager.addBillboards(this.citypoint[i],"/data/images/hngk/person.png",'地区人',23,"地区人中心")
                }               
                layerManager.fly(
                    109.81718500012782,
                    19.345261718452747,
                    474882,
                    6.237318703147128,
                    -1.5704875459600833,
                    0
                );
               
            });
        },
        switchFun(str) {
			this.checkedType = str
            if(str == 1){
                this.next()
            }else{
                this.preview()
            }
		},
        next(){
	        if (this.listLeft <= -366) {
				return
			}
			this.listLeft -= 366
        },
        preview(){
            if (this.listLeft >= 0) {
				return
			}
			this.listLeft += 366
        },
        initPersonInOut(){
             let baseurl = window.loginUrl;
             let that = this
              axios({
			    url: `${baseurl}/api/sheguan/realtimePersonInOut`,
			     	method: 'get',
			    }).then((res) => {
                    if(res.data.code == 200){
                        that.newData =  res.data.data
                        // 今日进岛人数
                        that.dataList[1].count = res.data.data.enterIslandNum
                        // 今日离岛人数
                        that.dataList[4].count = res.data.data.outIslandNum
                }
		})
        },
        initrkgk(){
           let baseurl = window.loginUrl;
           let that = this
           axios({
			    url: `${baseurl}/api/sheguan/rkgk`,
			     	method: 'get',
			    }).then((res) => {
                    if(res.data.code == 200){
                        // 常驻人口数量
                        that.dataList[5].count = res.data.data.czrk.sum
                        // 户籍人口数量
                        that.dataList[2].count = res.data.data.hjjt.sum
                        // 境外人员数量
                        that.dataList[3].count = res.data.data.jwry.sum
                        // 流动人口数量
                        that.dataList[6].count = res.data.data.ldrk.sum
                        // 未落户人口数量
                        that.dataList[7].count = res.data.data.wls.sum
                    }
			   })
        }
    },
    created(){
        // this.initData()
        // this.initrkgk()
    },
    mounted(){
        this.initPersonInOut()
        this.initrkgk()
        let that = this
        setTimeout(()=>{
         that.initPersonInOut()
        },100000)
        setTimeout(()=>{
            that.initrkgk()
        },100000)
    }
};
</script>
<style lang="stylus">
.el-carousel__container  {
    height: vh(270)
}
</style>
<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .rightOne {
        height: vh(300);
        width: vw(364);
        // background :pink;
        .rightOne-title{
            height: vh(24);
            width: vw(364);
            padding-left:vw1(12);
		    line-height: vh(24);
		    border-left: 2px solid #00e5fd;
		    font-family: 'FZTYSJW';
		    font-size: 18px;
		    font-weight: 600;
		    text-align: left;
		    color: #ffffff;
		    text-shadow: 0px 4px 4px 0px #000000;
		    background-clip: text;
		    -webkit-text-fill-color: transparent;
		    background-image: -webkit-linear-gradient(bottom, #00eaff, #ffffff);
        }
        .rightOne-content{
             width: vw(366);
             height: vh(270)
             overflow-x: hidden;
			overflow-y: hidden;
            .rightOne-btn{
                position:absolute;
                top:vh(285);
                left:vw(160);
                // width:vw(40);
                height:vh(10);
                display:block;
                span{
                    width:vw(20);
                    height:vh(10);
                    display:block;
                    background:rgba(255,255,255,0.3);
                    float:left;
                    border-radius:10%;
                    margin-right :vw(20);
                }
			    span:hover {
				cursor: pointer;
				background-color: #038595;
				color: #ffffff;
				border: 1px solid #038595;
			}
			.active {
				cursor: pointer;
				background-color: #038595;
				color: #ffffff;
				// border: 1px solid #038595;
			}
            }
            .rightOne-top{
                width: vw(800);
                height: vh(270)
                // background :pink;
                //   overflow :hidden
                overflow-x: hidden;
			    overflow-y: hidden;
                // position:absolute;
                // top:vh(20);
                // left:vw(0);
                // margin-left:vw(0)
                transition: margin-left 0.5s;
                .topinner{
                    width:vw(180);
                    height:vh(115);
                    float:left;
                    background:url("/data/images/hngk/personbg.png") no-repeat;
                    margin-right:vw(6);
                    background-size:100% 100%;
                    // background :pink;
                    margin-top:vh(10)
                    padding:5px;
                    box-sizing:border-box;
                    cursor:pointer
                    .topinner-left{
                        width: vw(40);
                        height:vh(120);
                        padding-top:vh(30);
                        box-sizing:border-box;
                        float:left
                        img{
                            vertical-align:middle;
                            margin-left:vw(2);
                        }
                    }
                    .topinner-right{
                        width: vw(123);
                        height:vh(110);
                        // background :pink;
                        float :left;
                        p{
                             width: vw(123);
                             height:vh(40);
                             line-height :vh(40);
                             text-align:center;
                             display :block;
                        }
                        .font{
                            width: vw(123);
                            height:vh(70);
                            line-height:vh(40);
                            // padding-top:vh(20);
                            box-sizing:border-box
                            // background:pink;
                            font-size:25px;
                            font-weight:500;
                            text-align:center;
                            // color:rgb(15, 205, 242);
                            span{
                                color:rgb(15, 205, 242); 
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
<style lang="stylus" scoped>
@media (min-width: 3000px) {
     .rightOne {
        height: vh(300);
        width:vw1(900);
        position: absolute;
        top: vh(100);
        left:vw1(40);
        // background :pink;
        .rightOne-title{
            height: vh(30);
            width: vw1(364);
            // padding-left:vw1(12);
		    // line-height: vh(24);
		    // border-left: 2px solid #00e5fd;
		    // font-family: 'FZTYSJW';
		    font-size: vw1(18);
            margin-bottom:vh(10);
        }
        .rightOne-content{
             width: vw1(900);
             height: vh(270);
            //  background:pink;
            .rightOne-btn{
                position:absolute;
                top:vh(285);
                left:vw(160);
                // width:vw(40);
                height:vh(10);
                display:none;
                span{
                    width:vw(20);
                    height:vh(10);
                    display:block;
                    background:rgba(255,255,255,0.3);
                    float:left;
                    border-radius:10%;
                    margin-right :vw(20);
                }
			    span:hover {
				cursor: pointer;
				background-color: #038595;
				color: #ffffff;
				border: 1px solid #038595;
			}
			.active {
				cursor: pointer;
				background-color: #038595;
				color: #ffffff;
				// border: 1px solid #038595;
			}
            }
            .rightOne-top{
                width:  vw1(900);
                height: vh(270);
                // background :pink;
                //   overflow :hidden
                // position:absolute;
                // top:vh(20);
                // left:vw(0);
                // margin-left:vw(0)
                transition: margin-left 0.5s;
                .topinner{
                    width:vw1(208);
                    height:vh(115);
                    float:left;
                    background:url("/data/images/hngk/personbg.png") no-repeat;
                    margin-right:vw(6);
                    background-size:100% 100%;
                    // background :pink;
                    margin-top:vh(10)
                    padding:5px;
                    box-sizing:border-box;
                    cursor:pointer
                    .topinner-left{
                        width: vw1(40);
                        height:vh(120);
                        padding-top:vh(30);
                        box-sizing:border-box;
                        float:left
                        img{
                            vertical-align:middle;
                            margin-left:vw(2);
                        }
                    }
                    .topinner-right{
                        width: vw1(123);
                        height:vh(110);
                        // background :pink;
                        float :left;
                        p{
                             width: vw1(123);
                             height:vh(40);
                             line-height :vh(40);
                             text-align:center;
                             display :block;
                        }
                        font{
                            width: vw1(123);
                            height:vh(70);
                            // padding-top:vh(20);
                            box-sizing:border-box
                            // background:pink
                        }
                    }
                }
            }
        }
    }
}
</style>